import React from 'react'
import './index.css'
import { List, InputItem, NavBar, Icon,Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import axios from 'axios'
class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      login:false,
      isLogin:true
    }
    
  }
  componentDidMount() {
    // this.autoFocusInst.focus();

  }
  goLogin=()=>{
    
    this.props.form.validateFields((error, value) => {
      if(!error){
        axios.post('http://localhost:8000/login/cellphone?phone=18281870413&password=zw1999').then(function () {
            Toast.loading('登录中...', 2, () => {
              Toast.hide();
              Toast.success('登录成功',2,()=>{
                window.location.href='/'
              })
            });
          })
          .catch(function (error) {
            console.log(error);
          });
        
      }
    });
  }
  handleClick = () => {
    this.inputRef.focus();
  }
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div className='login' style={{ minHeight: document.documentElement.clientHeight }}>
        <a onClick={()=>this.setState({login:true,isLogin:true})}></a>
        <a onClick={()=>this.setState({login:true,isLogin:false})}></a>
        {
          this.state.login?
        <div className='info' style={{ minHeight: this.state.isLogin?document.documentElement.clientHeight:550 }}>
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={()=>this.setState({login:false})}>{this.state.isLogin?"手机号登录":"手机号注册"}</NavBar>
            {this.state.isLogin?
          <List>
            <InputItem
            defaultValue='18281870413'
            value='18281870413'
              {...getFieldProps('phone')}
              placeholder="请输入手机号"
            />
            <InputItem
            defaultValue='zw1999'
            value='zw1999'
              {...getFieldProps('password')}
              placeholder="请输入密码"
            >
            </InputItem>
            <a onClick={()=>this.goLogin()}>登录</a>
          </List>:
          <List>
          <InputItem
            {...getFieldProps('telphone')}
            placeholder="请输入手机号"
          />
          <InputItem
            {...getFieldProps('password')}
            placeholder="设置登录密码，不少于6位"
          >
          </InputItem>
          <a>注册</a>
        </List>}
        </div>:""}
      </div>
    )
  }
}

export default createForm()(Login)